<template>
	<view class="me-box">
		<view class="top-box">
			<view class="login-box">
				<view class="not-login" v-if="!userStore.userInfo.name" @click="goLogin">
					<view class="avatar"></view>
					<view class="text-box">
						<view class="text-1">点击登录</view>
						<view class="text-2">Hi,欢迎来到服饰管理系统</view>
					</view>
				</view>
				<view class="is-login" v-else>
					<!-- <view class="avatar"><image class="avatar-img" :src="userInfo.avatar" mode=""></image></view> -->
					<view class="text-box">
						<view class="text-1">{{userStore.userInfo.name}}</view>
						<view class="text-2">Hi,欢迎来到服饰管理系统</view>
					</view>
				</view>
			</view>
			
		</view>
		<view  v-if="userStore.userInfo.name" class="bottom-box" @click="logout"> 
			退出登录
		</view>  
	</view>
</template>

<script setup>
	import {
	    onLoad,
		onShow,
		onPullDownRefresh
	  } from "@dcloudio/uni-app";
	import { ref } from "vue"
	import { showMsg } from "./../../utils/msg.js"
	import { useUserStore } from "../../store/index.js";
		
	const userStore = useUserStore()
	
	const goLogin = () => {
		uni.navigateTo({
		    url: '/pages/login/login'
		}); 
	}
	
	const logout = () => {
		userStore.logout()
	}

	onShow(()=>{ 
		
		
	})
	
	onLoad(()=>{

	})
	
</script>

<style lang="scss">
	.me-box{
		width: 100%;
		padding: 20rpx 0rpx;
		box-sizing: border-box;
		
		.top-box{
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 30rpx;
			
			.login-box{
				.not-login,.is-login{ 
					display: flex;
					align-items: center;
					.avatar{
						width: 85rpx;
						height: 85rpx;
						background-color: #dddddd;
						border-radius: 200rpx;
						margin-right: 20rpx;
						
						.avatar-img{
							width: 85rpx;
							height: 85rpx;
							background-color: #dddddd;
							border-radius: 200rpx;
						}
					}
					.text-box{
						.text-1{
							font-size: 26rpx;
							color: #171717;
							margin-bottom: 10rpx;
						}
						
						.text-2{
							font-size: 22rpx;
							color: #8d8d8d;
						}
					}
				}
			}
		}
		
		.bottom-box{
			padding: 30rpx;
			width: 100%;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 20rpx;
			margin-top: 30rpx;
		}
	}
</style>
